<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>

<%@include file="common_head.jsp" %>

	<script type="text/javascript" charset="utf-8">
      $(function() {
          $("img.scrollLoading").lazyload({effect: "fadeIn",threshold :300});  
          $(".scrollLoading1 img").lazyload({effect: "fadeIn"});
      });
    </script>
    
<body>
 <!--顶部工具条-->
<%@include file="common_nav.jsp" %>
<!--banner-->

<div class="ogmall_slider">
    <div class="hd">
        <ul><li></li><li></li><li></li></ul>
    </div>
    <div class="bd">
        <ul>
            <c:forEach items="${ ads}" var="a">
            <li><img src="${a.image }" /></li>
            </c:forEach>
            <!-- 
            <li><img src="img/banner_01.jpg" /></li>
            <li><img src="img/banner_01.jpg" /></li>
            <li><img src="img/banner_01.jpg" /></li>
             -->
        </ul>
    </div>
    <!--预约设计-->
    <%@include file="index_order.jsp" %>
    <!--预约设计 END-->
</div>
<!--banner END-->

<!--刷选-->
<div class="w-1200 margin-0-auto" id="ogmall_left">
    <!-- 
    <div class="ogmall_choice">
        <em>楼盘：</em>
        <span><a href="#" class="on">全部</a></span>
        <ul>
            <c:forEach items="${communityList }" var="co">
            <li><a href="#">${co.name }</a></li>	
            </c:forEach>
        </ul>
    </div>
     -->
</div>
<!--刷选 END-->
<div class="blank10"></div><div class="blank10"></div><div class="blank10"></div><div class="blank10"></div>
<!--软装设计师-->
<div class="w-1200 margin-0-auto">
    <div class="ogmall_designer">
    	<div class="ogmall_title">
            <h1>软装设计师<em></em></h1>
            <div class="ogmall_more"><a href="${ctx}/designer/index">更多</a></div>
        </div>
        <ul>
        	<c:forEach items="${designerList }" var="d">
        	<li><a href="${ctx }/designer/detail?designerId=${d.id}"><img class="scrollLoading" data-original="${d.user.headImage }"><h1>${d.user.realName }</h1></a></li>
            </c:forEach>
            <!-- 
            <li class="on"><a href="#"><img class="scrollLoading" data-original="img/4.jpg"><h1>李晓恒</h1></a></li>
            <li><a href="#"><img class="scrollLoading" data-original="img/4.jpg"><h1>李晓恒</h1></a></li>
            <li><a href="#"><img class="scrollLoading" data-original="img/4.jpg"><h1>李晓恒</h1></a></li>
            <li><a href="#"><img class="scrollLoading" data-original="img/4.jpg"><h1>李晓恒</h1></a></li>
            <li><a href="#"><img class="scrollLoading" data-original="img/4.jpg"><h1>李晓恒</h1></a></li>
            -->
        </ul>
    </div>
</div>    
    <!--软装设计师 END-->
    
    <div class="blank10"></div><div class="blank10"></div><div class="blank10"></div><div class="blank10"></div>
<div class="w-1200 margin-0-auto">
    <!--设计方案-->
    <%@include file="index_design.jsp" %>
    <!--设计方案 END-->
    <div class="blank10"></div><div class="blank10"></div><div class="blank10"></div><div class="blank10"></div>
    <!--实景效果-->
    <div class="ogmall_real">
        <div class="ogmall_title">
            <h1>客户自选方案<em></em></h1>
            <div class="ogmall_more"><a href="${ctx }/design/choice">更多</a></div>
        </div>
        <ul>
        	<c:forEach items="${userDesignList }" var="d">
        	<li><a href="${ctx }/design/detailChoice?id=${d.id}"><img class="scrollLoading" data-original="${d.headImage }"><div class="bg"><p>${d.community.name }<br>${d.houseType.name }<br>${d.area }㎡<br>${d.houseStyle.name }</p></div></a></li>
            </c:forEach>
        </ul>
    </div>
    <!--实景效果 END-->
    <div class="blank10"></div><div class="blank10"></div><div class="blank10"></div><div class="blank10"></div>
    <!--品牌家具-->
    <c:forEach items="${categoryProductDTOs }" var="cp"> 
    <div class="ogmall_furniture scrollLoading1">
    	<div class="ogmall_title">
            <h1>${cp.categoryName }<em></em></h1>
            <div class="hd">
                <ul>
                <c:forEach items="${cp.children }" var="cpc">
                <li>${cpc.categoryName }</li>
                </c:forEach>
                </ul>
            </div>
            <c:choose>
            	<c:when test="${cp.categoryName eq '品牌家具' }">
            		<div class="ogmall_more"><a href="${ctx }/product/list?productCategory.id=381">更多</a></div>
            	</c:when>
            	<c:otherwise>
            		<div class="ogmall_more"><a href="${ctx }/product/list?productCategory.id=443">更多</a></div>
            	</c:otherwise>
            </c:choose>
            
        </div>
        <div class="bd">
            <c:forEach items="${cp.children }" var="cpc">
            <ul>
            	<c:forEach items="${cpc.products }" var="p">
            	<li><a href="${ctx }/product/detail?id=${p.id}" title="${p.name }"><img data-original="${p.headImage }" style="width: 285px; height: 222px;"><h1>${fn:substring(p.name, 1, 18) }..</h1></a><p>
                ￥<fmt:formatNumber value="${p.firstSpec.realPrice }" type="currency" pattern="0.00"/>
                </p></br></li>
                </c:forEach>
            </ul>
            </c:forEach>
        </div>
    </div>
    </c:forEach>
    <!--品牌家具 END-->
    
    <!-- <div class="blank10"></div><div class="blank10"></div><div class="blank10"></div> <div class="blank10"></div>-->
    <!--合作品牌-->
    <div class="ogmall_brand">
    	<div class="ogmall_title">
            <h1>合作品牌<em></em></h1>
            <div class="ogmall_more"><!-- <a href="">更多</a> --></div>
        </div>
        <ul>
        	<c:forEach items="${brands }" var="b">
        	<li><a href="${ctx }/staybag/detail?brandID=${b.id}"><img class="scrollLoading" data-original="${b.image }"><h1>${b.name }</h1></a></li>
            </c:forEach>
        </ul>
    </div>
    <!--合作品牌 END-->
</div>
<div class="blank10"></div><div class="blank10"></div><div class="blank10"></div><div class="blank10"></div>
<div class="bottom-warp w-100p">

<%@include file="foot.jsp" %>

<%@include file="left_nav.jsp" %>

<script type="text/javascript" src="./js/plugins.js"></script>
<script type="text/javascript" src="./js/modules.js"></script>
<script type="text/javascript" src="./js/common.js"></script>
<script type="text/javascript">
	jQuery(".ogmall_slider").slide( { mainCell:".bd ul",autoPlay:true,effect:"left",interTime:5000,} );
	jQuery(".slideTab").slide({triggerEvent:true});
	jQuery(".doubleSlideTab").slide({ titCell:".parHd li",mainCell:".parBdIn",trigger:"click",triggerEvent:true });
	jQuery(".ogmall_furniture").slide({triggerEvent:true});
	$(function(){
		$('#city_dc').mousemove(function(e){
			$('.city_dc').show();
			e.stopPropagation();
		});
		$('.city_dc').mousemove(function(e){
			e.stopPropagation();
		});
		$(document).mousemove(function(){
			$('.city_dc').hide();
		});
		$('.city_dc a').mousemove(function(){
			$('.city_dc').hide();
		});
	});
	$(document).ready(function(){
		var a =$(".ogmall_choice div:gt(2):not(:last)");
			a.hide();
		$(".boxdown").click(function(){
			if(a.is(':visible')){
				 a.slideUp('fast');
				 $(this).html('显示更多');
			}else{
				a.slideDown('fast').show();	
				$(this).html('隐藏更多');
			}			
		});
	});
	$(function(){
		var scrollDir = 'down',lastScrollTop = $(window).scrollTop();
		var viewHeight = $(window).height(); //获取视窗高度
		$(window).scroll(function(event){
			viewHeight = $(window).height();
			var ling = $(window).scrollTop();
			var ct = ling - lastScrollTop;
			if(ling > ($('#ogmall_left').offset().top-viewHeight)){
				$('#ogmall_left_nav').show();
				$('#ogmall_left_nav').removeClass('ogmall_left_nav');
				
				if($('#ogmall_left').offset().top>ling){
					var top = $('#ogmall_left').offset().top-ling+20;
					if(top <20){
						top =20;
					}
					$('#ogmall_left_nav').css({top:top+'px'})
				}else{
					$('#ogmall_left_nav').css({top:20+'px'})
				}
				
			}else{
				$('#ogmall_left_nav').hide();
				$('#ogmall_left_nav').addClass('ogmall_left_nav');
				fixed = false;
			}
			lastScrollTop = ling;
		})
	})	
	$(function(){
		var a =$("#ogmall_left_nav li:gt(0)");
			a.hide();
		$(".f0").click(function(){
			if(a.is(':visible')){
				 a.slideUp('fast');
				 $(this).removeClass('f1');
			}else{
				a.slideDown('fast').show();	
				$(this).addClass('f1');
			}			
		});
	});
	$(document).ready(function(e) {
		$(".ogmall_designer li").mousemove(function(){
		$(this).addClass("on").siblings().removeClass("on");
		tola();
		});
	});
</script>
</body>
</html>
